# 第一步：从 0 到 Hello World
这里需要提前说明一下：在创建项目前，我默认屏幕前的各位已经有了一定的前端基础，如果是毫无基础的同学，可能对有些概念需要再辛苦勤劳一些，比如经常打开 Google 或掘金去搜索下相关的概念和用法。当然，这里我也默认你已经安装了 node 环境和 npm。
首先，创建一个以你项目命名的文件夹📂，比如我的就叫“0-1webpack”，创建完之后通过命令行打开当前目录，然后执行以下命令：
npm init
// 或
npm init -y
@前端进阶之旅: 代码已经复制到剪贴板
紧接着，命令行就会有交互提示，让我们输入一些项目的配置，你可以认真输入或是一路回车跳过稍后再填。
package name: (0-1webpack)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/workspace/self/0-1webpack/package.json:
{
"name": "0-1webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
@前端进阶之旅: 代码已经复制到剪贴板
在 “Is this OK” 之后，你会发现我们的项目多了一个 package.json 配置文件，文件的内容就是刚刚我们通过命令行输入的内容。当然，除了使用 npm init之外，你也可以手动创建该 package.json 文件并添加配置字段。
因为我们要创建一个前端项目，前端就必然离不开 HTML、CSS、JS 三大模块。那么，接下来，我们在项目中创建 index.html和src 文件夹，并且在 src 文件夹中创建 index.js 。
touch index.html
mkdir src
touch src/index.js
touch src/style.css
@前端进阶之旅: 代码已经复制到剪贴板
至此，我们的目录已经搭建完毕了。然后我们在 index.html中填入基本 HTML5 标签结构，并引入脚本文件和样式文件。在 index.js 文件中简单操作下 DOM，方便直观地看出来该 JS 文件已经生效。同时在 css 中设置 #app 的字体颜色为 red。
// src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./src/style.css"/>
<title>Document</title>
</head>
<body>
<div id="app" />
<script src="src/index.js"></script>
</body
</html>
// src/index.js
const app = document.querySelector('#app')
app.innerHTML = 'Hello World'
// src/style.css
#app{
color: red
}
